<template>
  <div>
    <el-table border
              :data="records">
      <template v-for="(column, index) in tableColumn">
        <el-table-column :key="index"
                         v-bind="column">
          <template slot-scope="scope">
            <div v-if="column.type === 'input'">
              <el-input v-model="scope.row[column.name]"
                        v-if="scope.row.edit" />
              <span v-else>
                {{ scope.row[column.name] }}
              </span>
            </div>
            <div v-else-if="column.type === 'account'">
              <el-input v-if="scope.row.edit"
                        v-model="scope.row[column.name]"
                        @input="account(scope.row, scope.$index, column.name)" />
              <span v-else>
                {{ scope.row[column.name] }}
              </span>
            </div>
            <div v-else-if="column.type === 'icon'">
              <span>
                {{ scope.row[column.name] }}
              </span>
              <span>
                <icon-svg v-if="scope.row.edit"
                          class="c-grey"
                          @click="remove(scope.$index)"
                          icon-name="shanchu_cha"></icon-svg>
                <icon-svg v-else
                          class="c-primary"
                          @click="edit(scope.$index)"
                          icon-name="bianji"></icon-svg>
              </span>
            </div>
            <span v-else>{{ scope.row[column.name] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
import emptyImg from "@/static/images/no_data.png";
export default {
  name: "GoodsInfo",
  props: {
    tableColumn: {
      type: Array,
      default: () => [
        {
          label: "货物名称",
          name: "goodsName"
        },
        {
          label: "重量(公斤)",
          name: "weight"
        },
        {
          label: "体积(方)",
          name: "volume"
        },
        {
          label: "数量",
          name: "quantity"
        },
        {
          label: "实签数量",
          name: "signQuantity",
          type: "input"
        },
        {
          label: "异常数量",
          name: "exceptionQuantity",
          type: "icon"
        },
        {
          label: "缺失",
          name: "lackQuantity",
          type: "account"
          // account:""
        },
        {
          label: "丢失",
          name: "loseQuantity",
          type: "account"
        },
        {
          label: "破损",
          name: "damageQuantity",
          type: "account"
        },
        {
          label: "其他",
          name: "otherQuantity",
          type: "account"
        },
        {
          label: "异常描述",
          name: "exceptionDesc",
          type: "input"
        },
        {
          label: "批次",
          name: "batchNo"
        },
        {
          label: "备注",
          name: "desc"
        }
      ]
    },
    tableData: {
      type: Array,
      default: () => []
    },
    orderType: {
      type: Number,
      default: 1
    }
  },
  watch: {
    tableData: {
      handler (val) {
        this.records = val;
      }
    }
  },
  data () {
    return {
      emptyImg,
      records: []
    };
  },
  mounted () {
    // this.records = this.tableData
  },
  methods: {
    edit (index) {
      this.$set(this.records[index], "edit", true);
    },
    remove (index) {
      this.$set(this.records[index], "edit", false);
    },
    account (row, index, name) {
      this.$forceUpdate();
      let {
        damageQuantity,
        loseQuantity,
        lackQuantity,
        otherQuantity,
        ...params
      } = row;
      let exceptionQuantity =
        Number(damageQuantity || 0) +
        Number(loseQuantity || 0) +
        Number(lackQuantity || 0) +
        Number(otherQuantity || 0);
      // this.$set(this.tableData[index], 'exceptionQuantity', exceptionQuantity)
      this.$set(this.records[index], "exceptionQuantity", exceptionQuantity);
      this.$set(this.records, index, row);
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-table__empty-block {
  display: none;
}
.cost-title {
  margin: 20px 0;
  font-size: 16px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.cost-style {
  color: var(--prev-icon-color-orange);
  cursor: pointer;
  margin-left: 5px;
  font-size: 20px;
}
</style>
